<template>
  <router-view v-if="initialized && !showAdultCheck"> </router-view>
  <VerifyEmailSlider></VerifyEmailSlider>
  <CutImageDialog />
  <CookieSlider></CookieSlider>
  <PopupDialog></PopupDialog>
  <PopupMessage></PopupMessage>
  <AdultCheck v-if="showAdultCheck"></AdultCheck>
  <PremiumCelebration />
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { locale } from '@/i18n'
import AdultCheck from '@/components/AdultCheck.vue'
import CookieSlider from '@/components/CookieSlider.vue'
import VerifyEmailSlider from '@/components/VerifyEmailSlider.vue'
import PopupDialog from '@/components/dialogs/PopupDialog.vue'
import PopupMessage from '@/components/dialogs/PopupMessage.vue'
import { useInit } from '@/compositions/main/init'
import { useAdultChecked } from '@/compositions/utils/adultChecked'
import CutImageDialog from './components/dialogs/CutImageDialog.vue'
import PremiumCelebration from './components/lottie/PremiumCelebration.vue'

// 初始化全域資料後關閉 loading
const initialized = ref(false)
useInit()
  .then(() => (initialized.value = true))
  .then(() => {
    const loadingEle = document.getElementById('loading-ele')
    const loadingStyle = document.getElementById('loading-style')

    if (loadingEle && loadingStyle) {
      loadingEle.addEventListener('transitionend', () => {
        loadingEle.remove()
        loadingStyle.remove()
      })

      // 關閉 loading
      loadingEle.style.opacity = '0'
      return
    }

    console.warn(
      'There is no #loading-ele and #loading-style in index.html, something went wrong??? Or this is hot reload by vite...',
    )
  })

// 18禁確認
// sign-up, thank-you 和 promote-creator 不需彈18禁確認
const route = useRoute()
const { adultChecked } = useAdultChecked()
const showAdultCheck = computed(
  () => !['lang-sign-up', 'lang-thank-you', 'lang-promote-creator'].includes(route.name) && !adultChecked.value,
)

// i18n 代碼要加在 route 路徑開頭
// 在頂層 watch locale 改變的話跟著改路徑
const router = useRouter()
watch(locale, (lang) => {
  const name = router.currentRoute.value.name
  if (name?.startsWith('lang-')) {
    router.replace({ name, params: { lang } })
  }
})
</script>
